<template>
<div class="npLayout">
    <div class="titleBox">
        <span>接下来播放</span>
        <p>
            <span>自动连播</span>
            <span>
                <el-switch v-model="switchVal" />
            </span>
        </p>
    </div>
    <div class="contentBox" ref="contentRef">
        <template v-if="props.adGame && props.adType === 3">
            <span ref="adRef" class="adBox">
                <ad-app-item
                    :game_base_id="props.adGame.game_base_id"
                    :game_icon="props.adGame.game_icon"
                    :game_name="props.adGame.game_name"
                    :game_tage="props.adGame.game_tage"
                    :grade="props.adGame.grade"
                    :notice="props.adGame.notice"
                    :notice_title="props.adGame.notice_title"
                ></ad-app-item>
            </span>
        </template>
        <template v-else-if="props.adVideo && props.adType === 2">
            <span ref="adRef" class="adBox">
                <next-play-item
                    :aid="props.adVideo.aid"
                    :cid="props.adVideo.cid"
                    :bvid="props.adVideo.bvid"
                    :duration="props.adVideo.duration"
                    :pic="props.adVideo.pic"
                    :owner="props.adVideo.owner"
                    :stat="props.adVideo.stat"
                    :title="props.adVideo.title"
                ></next-play-item>              
            </span>
        </template>
        <template v-else-if="props.adCard">
            <span ref="adRef" class="adBox">
                <ad-video-item
                    :pic="props.adCard?.cover"
                    :desc="props.adCard?.desc"
                    :title="props.adCard?.title"
                    :isAd="false"
                ></ad-video-item>              
            </span>
        </template>
        <span v-for="item in props.list" :key="item.aid">
            <next-play-item
                :aid="item.aid"
                :cid="item.cid"
                :bvid="item.bvid"
                :duration="item.duration"
                :pic="item.pic"
                :owner="item.owner"
                :stat="item.stat"
                :title="item.title"
            ></next-play-item>
        </span>
    </div>
</div> 
</template>

<script lang="ts" setup>
import { ref,onMounted } from 'vue';
import { info } from '../typeInterface'
import { nextPlayItem,adAppItem,adVideoItem } from '../components'
interface Props{
    list:Array<info>
    adGame?:{
        game_base_id:number //id
        game_icon:string    //图片
        game_name:string    
        game_tage:string    //标签
        grade:number        //评分
        notice:string       //简介
        notice_title:string //简介前标签
    }
    adVideo?:info
    adCard?:{
        cover:string  //img
        title:string
        desc:string
    }
    adType:number

}
const props = defineProps<Props>()
let switchVal = ref<boolean>(true)
const contentRef = ref()
const adRef = ref()
onMounted(() => {
    if (props.adType){
        handleAdNode()
    }
})
function handleAdNode(){
    //parent.node.insertBefore(要插入的节点,插在谁的前面)
    contentRef.value.insertBefore(adRef.value,contentRef.value.firstElementChild.nextElementSibling.nextElementSibling)
}
</script>

<style lang="scss" scoped>
.npLayout{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.titleBox{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: #18191C;
    & p:nth-child(2) span:nth-child(1){
        color: #9499A0;
        font-size: 13px;
        margin-right: 3px;
        cursor: pointer;
    }
}
.contentBox{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.adBox{
    border-top: 1px solid #E3e5e7;
    padding-top: 15px;
}
</style>